<!--
*@Author: QWP
*@Description: 应急群审核
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout
    class="f-h-100 s-bg-white"
    id="test">
    <u-search-header>
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <a-col>
          <u-icon-button @click="getSearch(1)">查询</u-icon-button>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button
                itype="add"
                @click="toEdit(1)">
                创建应急群
              </u-icon-button>
              <u-icon-button
                itype="edit"
                @click="toEdit(2)">
                修改
              </u-icon-button>
              <u-icon-button
                itype="delete"
                @click="deleteBtn">
                删除
              </u-icon-button>
              <!-- <u-icon-button class="f-fr" @click="showEdit = true">审核</u-icon-button> -->
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <u-table-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :loading="loading"
        :scroll="{ y: useTableScroll() }"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
        @onDblclick="onDblclick"
        @change="getSearch"></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <EditD
    v-model:open="showEdit"
    width="70%"
    :title="keyid ? '群聊信息' : dialogTitle"
    :keyid="keyid"
    @close="keyid = ''"
    @success="
      (data) => {
        keyid = ''
        showEdit = false;
        // showShare = true
        groupInfo = data;
        getSearch();
      }
    " />

  <!-- 分享二维码弹窗 -->
  <ShareQrcode
    v-model:open="showShare"
    width="50%"
    :keyid="groupInfo['keyid']"
    title="二维码生成" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import { useBaseStore, useLoginStore } from "@/store";
import { storeToRefs } from "pinia";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { numberC, messageC, alertC } from "@/util/common";
import { formatAmt, getItemByIds } from "@/util/format.ts"
import dayjs from "dayjs";
import EditD from "./createEdit/EditD.vue";
import ShareQrcode from "./ShareQrcode.vue";
import { cloneDeep } from "lodash";
import { useTableScroll } from "@/hooks/useTable";
import * as groupApi from "@/service/emergency/group";

const route = useRoute();
const router = useRouter();

const { deptData, deptUsers } = storeToRefs(useBaseStore());

onMounted(() => {
  getSearch();
});

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    appUnit: "",
    keywords: "",
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  // { label: "申请单位", key: "appUnit", element: "select", col: { span: 4 },
  //   formItemProps: formItemProps,
  //   componentProps: {
  //     options: deptData.value
  //   }
  // },
  { label: "关键字", key: "keywords", element: "input", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: {
      placeholder: '群名'
    }
  },
];

// 列表
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "groupNames", title: "群名", width: 100 },
  {
    dataIndex: "appUnitName",
    title: "申请单位",
    width: 100,
  },
  {
    dataIndex: "appUser",
    title: "申请人",
    width: 150,
    customRender: ({ text }) => {
      let info = getItemByIds(deptUsers.value, [text]);
      return info.length > 0 ? info[0]["name"] : "";
    },
  },
  { dataIndex: "telNo", title: "申请人联系电话", width: 150, align: "center" },
  {
    dataIndex: "appTime",
    title: "申请时间",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      return text ? dayjs(text).format("YYYY-MM-DD") : "";
    },
  },
]);

// 列表查询
const getSearch = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.current = 1;
    }

    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;

    const res = await groupApi.page(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.total = numberC(res.data.total);
    }
  } catch (error) {}
  loading.value = false;
};

// 编辑
let dialogTitle = ref<string>("新增群聊");
let showEdit = ref<boolean>(false);
let showShare = ref<boolean>(false);
let groupInfo = ref({});

const keyid = ref<string>('')
const onDblclick = (record) => {
  keyid.value = record['keyid'];
  showEdit.value = true;
}

// 编辑 1 新增     2 修改
const toEdit = (type: number) => {
  if(type == 2) {
    if(tabSelData.value.length != 1) {
      messageC("只能选择一条数据进行修改!");
      return
    }
    keyid.value = tabSelData.value[0]['keyid'] || ''
  }
  showEdit.value = true;
};

// 群删除
const deleteBtn = async () => {
  if(tabSelData.value.length == 0) {
    messageC("请先选择需要删除的数据！");
    return
  }
  try {
    await alertC('确认删除选中的群聊？');

    let ids = tabSelData.value.map(i => i.keyid);
    const res = await groupApi.del({ ids: ids.join(',') })
    if(res.code == 0) {
      messageC(res.msg, 'success');
      getSearch()
    }
    else {
      messageC(res.msg, 'warning');
    }
  } catch (error) {}
}
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
